import '../market.less'; //公共样式 书写布局的
import './EchartsTable.less'; //内部样式的书写

import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { Table, Input, Button, Col, Row } from 'antd';
import { request } from 'umi';
import '../../iconfont/iconfont.css';
import {
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
const EchartsTable = () => {
  const [datalist, setDatalist] = useState([]); //  总数据渲染
  const [pagesize, setPagesize] = useState(0); // 一共多少页
  const [pagecount, setPagecount] = useState(0); // 数据条数
  const [inputpagesize, setiInputpagesize] = useState(1); // 输入框数据
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  const defaultColumns = [
    {
      title: '序号',
      key: '_id',
      width: 70,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '合同名称',
      key: 'name',
      width: 250,
      dataIndex: 'name',
      ellipsis: true,
      render: (text) => (
        <>
          <a
            className="iconfont icon-sanjiaoright"
            style={{ fontSize: '5px', marginRight: '3px', color: '#000000' ,background:'linear-gradient(to right, #8f41e9, #578aef)'}}
          ></a>
          {text}
        </>
      ),
    },
    {
      title: '合同编号',
      dataIndex: 'name_id',
      key: 'name_id',
      ellipsis: true,
      width: 150,
      render: (text) => (
        <>
          <i
            className="iconfont icon-sanjiaoright"
            style={{ fontSize: '5px', marginRight: '3px' }}
          ></i>
          {text}
        </>
      ),
    },
    {
      title: '利润总额',
      dataIndex: 'sumlirun',
      key: 'sumlirun',
      ellipsis: true,
      width: 100,
    },
    {
      title: '利润率(%)',
      dataIndex: 'lirunlu',
      key: 'lirunlu',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '数量合计',
      dataIndex: 'countsum',
      key: 'countsum',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '税额',
      dataIndex: 'ruiee',
      key: 'ruiee',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '建议进价成本',
      dataIndex: 'jinjiao',
      key: 'jinjiao',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '客户名称',
      dataIndex: 'kehu_name',
      key: 'kehu_name',
      ellipsis: true,
      width: 250,
      render: (text) => (
        <>
          <i
            className="iconfont icon-sanjiaoright"
            style={{ fontSize: '5px', marginRight: '3px' }}
          ></i>
          {text}
        </>
      ),
    },
    {
      title: '销售人员',
      dataIndex: 'xiaoshou_name',
      key: 'xiaoshou_name',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#000000' }}>{text}</a>,
    },
    {
      title: '到账总额',
      dataIndex: 'daozhang_sum',
      key: 'daozhang_sum',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '产品成本',
      dataIndex: 'canpin',
      key: 'canpin',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '费用总额',
      dataIndex: 'feiyong_sum',
      key: 'feiyong_sum',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '退货总额',
      dataIndex: 'tuihuo_sum',
      key: 'tuihuo_sum',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '发货数量',
      dataIndex: 'fahuo_count',
      key: 'fahuo_count',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '出库数量',
      dataIndex: 'chuhuo_count',
      key: 'chuhuo_count',
      ellipsis: true,
      width: 100,
      render: (text) => <a style={{ color: '#999999' }}>{text}</a>,
    },
    {
      title: '发货状态',
      dataIndex: 'fahuo_state',
      key: 'fahuo_state',
      ellipsis: true,
      width: 100,
    },
    {
      title: '出库状态',
      dataIndex: 'chuku_state',
      key: 'chuku_state',
      ellipsis: true,
      width: 120,
    },
  ];
  useEffect(() => {
    request('/api/hqh/getdata').then((val) => {
      setDatalist(val.data);
      setPagecount(val.datacount);
      setPagesize(val.datapage);
    });
    setDcolumns(defaultColumns);
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };

  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width || 100, // 100 没有设置宽度可以在此写死 例如100试下
      onResize: handleResize(index),
    }),
  }));

  return (
    <div className="echartstab">
      <div className="buttondata">
        <Button>过滤</Button>
        <Button>还原</Button>
        <Button>打印</Button>
        <Button>日志</Button>
        <Button>导出</Button>
      </div>
      <div className="applysearch">
        <Row>
          <Col span={6}>
            {' '}
            <ProFormText width="md" name="name1" label="管理项目" />
          </Col>
          <Col span={6}>
            {' '}
            <ProFormText width="md" name="name2" label="合作名称" />
          </Col>
          <Col span={6}>
            <ProFormText width="md" name="name3" label="客户名称" />
          </Col>
          <Col span={6}>
            {' '}
            <ProFormText width="md" name="name4" label="销售人员" />
          </Col>
        </Row>
        <Row>
          <Col span={6}>
            {' '}
            <ProFormText width="md" name="name5" label="发货状态" />
          </Col>
          <Col span={6}>
            {' '}
            <ProFormText width="md" name="name6" label="出库状态" />
          </Col>
          <Col span={6}>
            {' '}
            <Button className="searcha">查询</Button>
          </Col>
        </Row>
      </div>
      <div className="container hou_1">
        <Table
          components={components}
          columns={columns}
          pagination={false}
          bordered
          rowKey="_id"
          scroll={{
            x: 900,
            y: 500,
          }}
          onRow={(record, index) => {
            return {
              onClick: (e) => {
                let tr = e.target.parentNode; //拿到tr标签
                for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                  tr.parentNode.childNodes[i].style.color = 'black';
                }
                //单独设置被选中的标签颜色
                tr.style.color = 'red';
              },
            };
          }}
          dataSource={datalist}
        />
        {/* <div className="hou_2">
          <Button
            onClick={() => {
              let a = Number(inputpagesize) - 1;
              setiInputpagesize(a);
              request('/api/hqh/getdata?pagesize=' + a).then((val) => {
                setDatalist([]);
                setDatalist(val.data);
              });
            }}
            disabled={inputpagesize >= pagesize ? false : true}
          >
            {' '}
            <span className="span_1 iconfont icon-xiangzuoshuangjiantou"></span>{' '}
          </Button>
          <Button
            onClick={() => {
              let a = Number(inputpagesize) - 1;
              setiInputpagesize(a);
              request('/api/hqh/getdata?pagesize=' + a).then((val) => {
                setDatalist([]);
                setDatalist(val.data);
              });
            }}
            disabled={inputpagesize >= pagesize ? false : true}
          >
            {' '}
            <span className="span_2  iconfont icon-xiangzuojiantou"></span>{' '}
          </Button>
          <span className="span_2_2  iconfont icon-vertical_line"></span>
          <span className="span_3">
            第
            <Input
              value={inputpagesize}
              onChange={(e) => {
                setiInputpagesize(e.target.value);
                request('/api/hqh/getdata?pagesize=' + e.target.value).then(
                  (val) => {
                    setDatalist([]);
                    setDatalist(val.data);
                  },
                );
              }}
            />
            页，
          </span>
          <span className="span_4">共 {pagesize} 页</span>
          <span className="span_4_2  iconfont icon-vertical_line"></span>
          <Button
            onClick={() => {
              let a = Number(inputpagesize) + 1;
              setiInputpagesize(a);
              request('/api/hqh/getdata?pagesize=' + a).then((val) => {
                setDatalist([]);
                setDatalist(val.data);
              });
            }}
            disabled={inputpagesize >= pagesize ? true : false}
          >
            <span className="span_5  iconfont icon-xiangyoujiantou"></span>
          </Button>
          <Button
            onClick={() => {
              let a = Number(inputpagesize) + 1;
              setiInputpagesize(a);
              request('/api/hqh/getdata?pagesize=' + a).then((val) => {
                setDatalist([]);
                setDatalist(val.data);
              });
            }}
            disabled={inputpagesize >= pagesize ? true : false}
          >
            <span className="span_6  iconfont icon-xiangyoushuangjiantou"></span>
          </Button>
          <p className="hou_2_p">
            显示 {inputpagesize * 10 - 9} - {inputpagesize * 10} 条，共{' '}
            {pagecount}条
          </p>
        </div> */}
      </div>
    </div>
  );
};

export default EchartsTable;
